<template>
  <div class="wrap">
    <div class="wrap-item">
      卫生环境
      <el-rate v-model="starWs" :disabled="true"></el-rate>
    </div>
    <div class="wrap-item">
      管理服务
      <el-rate v-model="starGl" :disabled="true"></el-rate>
    </div>
    <div class="wrap-item">
      设施设备
      <el-rate v-model="starSb" :disabled="true"></el-rate>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    starWs: {
      type: Number,
      require: true,
      default: () => 0,
    },
    starGl: {
      type: Number,
      require: true,
      default: () => 0,
    },
    starSb: {
      type: Number,
      require: true,
      default: () => 0,
    },
  },

  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 505px;
  height: 250px;
  box-sizing: border-box;
  padding: 90px 76px 50px 80px;
  font-size: 18px;
  color: #efeded;
  background: url("../../assets/img/home-06.png") no-repeat center center;
  background-size: contain;
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  .wrap-item {
    display: flex;
    justify-content: space-between;

    ::v-deep .el-rate {
      top: -7px;
      position: relative;

      .el-rate__icon {
        margin-right: 24px;
        font-size: 30px;
      }
      .el-rate__item:last-child {
        .el-rate__icon {
          margin-right: 0px;
        }
      }
    }
  }
}
</style>